<template>
  <div class="list" v-if="list.length">
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="label" :title="item.chkitemName">
        <span>{{ item.chkitemName }}:</span>
        <span class="score-input">{{ item.scoreInput }}{{ item.scoreType === SCORE_TYPE.PERCENT ? '%' : '分' }}</span>
        <dict-tag class="m-l-sm" :options="dict.type.cq_eval_score_level" :value="item.scoreLevel" />
        <dict-tag class="m-l-sm" :options="dict.type.cq_eval_result_enum" :value="item.scoreResult" />
      </div>
      <div class="line" />
      <div class="level-child">
        <el-tag type="info" v-for="citem in item.children" :key="citem.chkitemId" class="score-item">
          <span>{{ citem.chkitemName }}:</span>
          <span class="score-input">{{ citem.scoreInput }}{{ citem.scoreType === SCORE_TYPE.PERCENT ? '%' : '分' }}</span>
        </el-tag>
      </div>
    </div>
  </div>
</template>
<script>
// 得分展示
import { CQ_EVAL_SCORE_TYPE as SCORE_TYPE, CQ_EVAL_RESULT_ENUM as RESULT } from '@/utils/baseData'
export default {
  name: 'ScoreDisplay',
  props: {
    value: { type: Object, default: () => ({}) },
    cfg: { type: Object, default: () => ({}) }
  },
  dicts: ['cq_eval_score_level', 'cq_eval_result_enum'],
  data() {
    return {
      SCORE_TYPE,
      list: []
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler() {
        this.initData()
      }
    }
  },
  methods: {
    initData() {
      const cfgInfo = this.cfg || {}
      const cfgs = cfgInfo.children || []
      const evalScore = this.value || {}
      let scores = JSON.parse(JSON.stringify(evalScore.scores || []))
      // 甩项不展示
      scores = scores.filter(i => i.scoreResult !== RESULT.THROWTERM)

      if (!cfgs.length || !scores.length) return (this.list = [])

      const cfgMap = cfgs.reduce((o, i) => !void (o[i.chkitemCode] = i) && o, {})
      scores.map(i => {
        const cfg = cfgMap[i.chkitemCode]
        if (!cfg) return
        i.chkitemName = cfg.chkitemName
        i.seq = cfg.seq || 0
        i.showDataType = 'num'
      })
      // 排序
      scores.sort((a, b) => {
        if (a.seq !== b.seq) return b.seq - a.seq
        return (a.chkitemCode || '').localeCompare(b.chkitemCode || '')
      })
      const list = []
      const children = []
      for (let i = 0; i < scores.length; i++) {
        if (cfgInfo.chkitemId === scores[i].parentId) {
          list.push(scores[i])
        } else {
          children.push(scores[i])
        }
      }
      if (list.length > 0) {
        list[0].children = children
        this.list = list
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  $lineColor: #ececec;
.m-l-sm {
  display: inline-block;
  margin-left: 10px;
}
.flex-x-center {
  display: flex;
  align-items: center;
}
.muted {
  color: #606266;
}
.red {
  color: #f56c6c;
}
.list {
  display: flex;
  flex-wrap: wrap;
  zoom: 0.9;
  font-size: 13px;
  color: #303133;
}
.item {
  background-color: #f5f7fa;
  border-radius: 5px;
  padding: 10px 10px;
  margin: 0 5px 5px 0;
  border: 1px solid $lineColor;
  .level-child {
    margin-right: 20px;
    display: flex;
    flex-wrap: wrap;
    .score-item {
      margin-right: 20px;
    }
  }
  .score-input {
    margin-left: 10px;
  }
}
.label {
  line-height: 1.5;
  padding-bottom: 10px;
}
.line {
  margin: 0 -10px;
  margin-bottom: 10px;
  border-bottom: 1px solid $lineColor;
  height: 1px;
}
</style>
